<template>
    <div class="addPet">
        <el-form :model="formInline" label-position="top" size="large">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="用户ID">
                        <el-input v-model="formInline.users[0]._id" placeholder="用户ID" clearable disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户名">
                        <el-input v-model="formInline.users[0].username" type="number" placeholder="用户名" clearable
                            disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="账号状态">
                        <el-input v-model="formInline.users[0].userstate" placeholder="账号状态" clearable disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="宠物ID">
                        <el-input v-model="formInline.pets[0]._id" placeholder="宠物ID" clearable disabled />
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="宠物名称">
                        <el-input v-model="formInline.pets[0].name" placeholder="宠物名称" clearable disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话">
                        <el-input v-model="formInline.users[0].Phone" placeholder="领养地址" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="审批状态">
                        <el-select v-model="formInline.status" placeholder="待审批" :disabled="formInline.status == '宠物已被领养' || formInline.status == '通过审核'? true : false">
                            <el-option label="待审批" value="待审批" />
                            <el-option label="审核不通过" value="审核不通过" />
                            <el-option label="通过审核" value="通过审核" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="申请时间">
                        <el-input v-model="formInline.time" type="tel" placeholder="申请时间" clearable disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">修改</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps } from 'vue'
import { updateExamine } from '@/utils/jia-axios'
import { ElNotification } from 'element-plus'

const { filterPet } = defineProps(['filterPet'])

const emit = defineEmits(['handleDraewr'])
// 表单数据
// 名称、品种、年龄、性格、健康情况、领养地址、发布时间、联系
// name,Variety, age, personality, health, address, time, contact
const formInline = ref(filterPet)

// 提交数据，添加宠物领养信息
const onSubmit = async () => {
    const { _id, userID, petID, petName, time, status } = formInline.value
    let formData = {
        _id, userID, petID, petName, time, status
    };
    await updateExamine(formData).then(res => {
        ElNotification({
            title: '修改成功',
            message: `成功修改 1 条数据`,
            type: 'success',
        })
    })
    // console.log('updatePet submit!', formData)

    emit('handleDraewr')
}
</script>


<style lang="less" scoped>
.addPet {
    box-shadow: 0 0 0 0 #000;
    border-radius: 20rem;
    background-color: #fff;
    padding: 0;

    .upload {
        img {
            width: 100%;
            height: auto;
        }
    }
}

.demo-form-inline .el-input {
    --el-input-width: 220rem;
}

.demo-form-inline .el-select {
    --el-select-width: 220rem;
}

// .el-button, .el-button.is-round{
//     margin: auto;
//     // padding: 0 26rem;
// }
.el-radio-group {
    width: 100%;
}
</style>